<template>
  <div>
  <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>文章列表</span>
  </div>
  <div>
    <!-- 表单 -->
    <el-form ref="form" label-width="100px">
    <!-- 文章状态 -->
      <el-form-item label="文章状态">
        <el-radio-group v-model='filterParams.status'>
          <el-radio :label="null">全部</el-radio>
          <el-radio :label="0">草稿</el-radio>
          <el-radio :label="1">待审核</el-radio>
          <el-radio :label="2">审核通过</el-radio>
          <el-radio :label="3">审核失败</el-radio>
          <el-radio :label="4">已删除</el-radio>
        </el-radio-group>
      </el-form-item>
       <!-- 频道 -->
      <el-form-item label="文章状态：">
        <el-select v-model='filterParams.channel_id' placeholder="请选择">
          <el-option :key=item.id v-for="item in channels" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <!-- 时间选择 -->
      <el-form-item label="时间选择：">
        <el-date-picker
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</el-card>
<!-- 文章列表 -->
<el-card>
  <div slot="header" class="clearfix">
    <span>共找到{{total_count}}条符合条件的内容</span>
    <el-table
    :data= 'list'>
      <!-- <el-table-column label="封面" prop='cover.images[0]'> -->
      <el-table-column label="封面">
        <!-- 定制图片效果 -->
        <template v-slot="slotProps">
              <el-image :src="slotProps.row.cover.images[0]" style="width:150px;height:100px">
                 <!-- 如果el-image组件src如果不存在 就显示默认图片 -->
                  <div slot="error">
                    <img src="../assets/imgs/error.gif" style="width:150px;height:100px" />
                  </div>
              </el-image>
        </template>
      </el-table-column>
      <el-table-column label="标题" prop="title"></el-table-column>
      <el-table-column label="状态">
        <!-- 默认显示状态 -->
        <template v-slot="slotProps">
          <!-- status这个数据从子组件中来的 -->
          <div>
              <el-tag v-if="slotProps.row.status===0" type="info">草稿</el-tag>
              <el-tag v-else-if="slotProps.row.status===1">待审核</el-tag>
              <el-tag v-else-if="slotProps.row.status===2" type="success">审核通过</el-tag>
              <el-tag v-else-if="slotProps.status===3" type="warning">审核失败</el-tag>
              <el-tag v-else type="danger">已删除</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="发布时间" prop="pubdate"></el-table-column>
      <el-table-column label="操作" width="120px">
        <template>
          <el-button plain type="primary" icon="el-icon-edit" circle></el-button>
          <el-button plain type="danger" icon="el-icon-delete" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</el-card>
  </div>
</template>
<script>
// 导入接口调用的业务
import { articeList, getChannelList } from '@/api/api-artice.js'
export default {
  data () {
    return {
      filterParams: {
        // 如果不传当值为null  默认查询全部状态
        // 文章的状态
        status: null,
        // 频道id
        channel_id: null,
        // 开始时间
        begin_pubdate: null,
        // 结束时间
        end_pubdate: null,
        // 当前页码
        page: 1,
        // 每页显示的条数
        per_page: 10
      },
      // 当前的页面
      // page: 1,
      // 每页显示条数
      // per_page: 10,
      // 列表的总条数
      total_count: 0,
      list: [],
      // 频道列表
      channels: []
    }
  },
  methods: {
    async getChannelList () {
      // 获取频道列表数据
      // const ret = await getChannelList({})
      // console.log(ret)
      // try {
      //   const { data } = await getChannelList({})
      //   this.channels = data.channels
      // } catch (e) {
      //   this.$message.error('获取频道列表数据失败')
      // }
      const [err, ret] = await getChannelList()
      if (err) {
        // 存在异常
        return this.$message.error('获取频道列表数据失败！')
      }
      this.channels = ret.data.channels
    },
    async loadArticleList () {
      // 调用接口获取文章列表数据
      // try {
      //   const ret = await articeList({})
      //   // console.log(ret)
      //   this.page = ret.data.page
      //   this.per_page = ret.data.per_page
      //   this.total_count = ret.data.total_count
      //   this.list = ret.data.results
      // } catch (e) {
      //   // 获取文章列表数据失败
      //   this.$message({
      //     showClose: true,
      //     message: '获取文章列表数据失败',
      //     type: 'error'
      //   })
      // }
      const [err, ret] = await articeList(this.filterParams)
      if (err) {
        // 存在异常
        return this.$message.error('获取文章列表数据失败！')
      }
      this.filterParams.page = ret.data.page
      this.filterParams.per_page = ret.data.per_page
      this.total_count = ret.data.total_count
      this.list = ret.data.results
    }
  },
  created () {
    // 组件渲染时触发接口调用
    this.loadArticleList()
    // 组件渲染时触发接口
    this.getChannelList()
  }
}
</script>
